//获取所有的按钮
let btns = document.querySelectorAll(".btns a");

//获取所有的图片
let pics=document.querySelectorAll(".pics img")
//遍历所有的按钮，批量绑定事件
btns.forEach(function (item, i) {
    item.onmouseover = function () {
        clearInterval(timeId);//先清除定时器、在鼠标放到a上面时
        play(i);
    }
    item.onmouseout = function () {
        autoplay();
        num = i;
    }
});

pics.forEach(function (item, i) {
    item.onmouseover = function () {
        clearInterval(timeId);//先清除定时器、在鼠标放到a上面时
    }
    item.onmouseout = function () {
        autoplay();
    }
});

//定义一个全局变量，用来保存当前播放到的哪一张图片
let num = 0;
let timeId = null;//定义一个全局的定时器  标识
//让轮播图自己播放
function autoplay() {//函数包装  定时器
    timeId=setInterval(() => {
        num++;
        let v = num % pics.length;//通过整除取余数形成循环数//实现不断循环播放

        play(v);
    }, 5000);
}
autoplay();
//抽取出独立的播放器函数，要播放那个图片就传入  参数
function play(n) {//n  代表哪一张图片
    //去除所有按钮的样式  on
    btns.forEach(function (item1) {
        item1.className = "";
    });

    //给按钮加上样式 on
    btns[n].className = "on";

    //隐藏所有的图片
    pics.forEach(function (item2) {
        item2.style.display = "none";
    });

    //显示当前按钮对呀的图片（可以使用下标来一一对应）
    pics[n].style.display = "block";
}
